<template>
  <div>
    <!-- 直接在组件中获取数据 不好维护和阅读 -->
    <h2>Count插值拿:{{ $store.state.count }}</h2>
    <h2>num插值拿:{{ $store.state.num }}</h2>

    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>

    <h2>商品的总价格是:插值拿:{{ $store.getters.allPrice }}</h2>
    <h2>商品的总价格是:计算属性拿:{{ allPrice }}</h2>

    <button @click="incrementCount">累加count</button>
    <button @click="incrementNCount({ n: 2 })">累加n count</button>
  </div>
</template>

<script>
//Vuex还提供了一个mapGetters的辅助函数,方便我们生成一个获取getter的 计算属性组成的对象
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "count",
  mounted() {
    // const result = mapGetters(["allPrice"]);
    // console.log(result.allPrice.call(this));
  },
  computed: {
    ...mapState(["count", "num"]),
    //mapGetters接受的参数可以是 数组 也可以是对象
    // ...mapGetters(["allPrice"]),
    ...mapGetters({ allPrice: "allPrice" }),
  },
  methods: {
    ...mapMutations(["incrementCount", "incrementNCount"]),
  },
};
</script>

<style></style>
